<template>
    <div class = 'Mdetail'>
        <div v-if = 'iswait' class = 'wait'>
            <waiting></waiting>
        </div>
        <div class = 'imgBox' v-if = 'issure'>
            <div class = 'back'>
                <div @click='fun' v-if = '!$route.query.cityname'><span><i class='iconfont icon-youjiantou'></i></span></div>
                <router-link :to = '{path:"/movie",query:{cityname:$route.query.cityname,cityid:$route.query.cityid}}'>
                        <div v-if = '$route.query.cityname'><span><i class='iconfont icon-youjiantou'></i></span></div>
                </router-link>
            </div>
            <img :src = "datalist.movie.img" v-if = 'issure'> 
        </div>
        <div class = 'text' v-if = 'issure'>
            <div class = 'textTop'>
                <span class = 'movieName'>{{datalist.movie.nm}}</span>
                <span class = 'dd'>2D</span>
                <span class = 'score'>
                    <i v-if = 'datalist.movie.sc != 0'>{{datalist.movie.sc}}分</i>
                </span>
            </div>
            <div class = 'type'>{{datalist.movie.cat}}</div>
            <div>{{datalist.movie.pubDesc}}</div>
            <div>时长:{{datalist.movie.dur}}分钟</div>
            <div class = 'dra' :class = '{max : !isclick}'>
                <div class="content">简介：{{datalist.movie.dra}}</div>
                <div class="dra-arrow" :class = '{arrow : !isclick}'>
                    <i class = 'iconfont icon-xiajiantou' @click = 'click'></i>
                </div>
            </div>
        </div>
        <div class = 'actor' v-if = 'issure'>
                <div class="a-text"><div class="textName">导演 ：</div><div class="textContent"><span>{{datalist.movie.dir}}</span></div></div>
                <div class="a-text"><div class="textName">主演 ：</div><div class="textContent"><span>{{datalist.movie.star}}</span></div></div>  
                <div class="a-text"><div class="textName">语言 ：</div><div class="textContent"><span>{{datalist.movie.oriLang}}</span></div></div>  
                <div style="text-align:center;color:#1f8a70;"><i>{{datalist.movie.scm}}</i></div>  
        </div>
        <div class = 'photo' v-if = 'issure'>
            <div>剧照</div>
            <div>
                <ul>
                    <li v-for = '(item,index) in datalist.movie.photos' v-bind:key='index' v-show = 'index<=7'><img :src = 'item'></li>
                </ul>
            </div>
        </div>
        <div class = 'bottom' v-if = 'issure'>
            <router-link :to="{path : '/cinemaSelect',query:{movieName:datalist.movie.nm,movieId:datalist.movie.id}}">
                <div>选座购票</div>
            </router-link>
        </div>
    </div>   
</template>
<script>
import waiting from '@/components/waiting.vue';
export default {
    data(){
        return {
            datalist : [],
            issure : false,
            isclick : false,
            iswait : true,
        }
    },
   created(){
       this.movieDetail(this.$route.query.id)
   },
   components:{
       waiting,
   },
   methods:{
       movieDetail(id){
                // console.log(id)
                axios.get(`https://apis.netstart.cn/maoyan/movie/intro?movieid=${id}`)
                .then(
                    data=> {     
                        this.issure = true;
                        this.datalist = data.data.data
                        // console.log(this.datalist);
                        this.datalist.movie.img = this.datalist.movie.img.replace('w.h','600.480')
                        // console.log(this.datalist.movie.photos)

                        this.datalist.movie.photos.forEach((element,index) => {
                            element = element.replace('w.h','2500.1600').replace('@2500w_2500h_1l_0e','');
                            this.datalist.movie.photos[index]  = element;
                        });
                        this.iswait = false;
                    }
                );
        },
        click(){
            this.isclick  = !this.isclick;
        },
        fun(){
            this.$router.go(-1);
        }
   }
}
</script>
<style lang='scss' scoped>
@import '../assets/font/font_icon/iconfont.css';
.Mdetail{
    position:absolute;
    width : 100%;
    min-height:100%;
    background-color : #f4f4f4;
    z-index : 100;
    font-size : 18px;
    .wait{
        height : 300px;
        line-height : 300px;
        text-align : center;
        color : grey;
        font-size : 21px;
    }
    .imgBox{
        position:relative;
        height : 250px;
        overflow : hidden;
        .back{
            position:absolute;
            top : 10px;
            left : 10px;
            width : 30px;
            height : 30px;
            background-color :  #f4f4f4;
            border-radius : 50%;
            text-align : center;
            line-height : 30px;
            transform : rotateY(180deg);
            span{
                display : block;
                i{
                    font-size : 20px;
                    color : #FF9900;
                }
            }
        }
        img{
            width : 100%;
        }
    }
    .text{
        background-color : white;
        padding : 10px;
        border-radius : 4px;
        div{
            color : gray;
            margin-bottom :5px;
        }
        .textTop{
            color : black;
            .movieName{
                font-weight:bold;
                color : #ff9900;
            }
            .dd{
                display : inline-block;
                margin-left : 10px;
                width : 25px;
                height : 20px;
                text-align : center;
                border-radius : 5px;
                font-size : 14px;
                color : white;
                background-color : #ccc;
            }
            .score{
                float : right;
                color : #ff9900;
            }
        }
    }
    .dra{
        position:relative;
        font-size : 14px;
        .arrow{
            position:absolute;
            // bottom : -10px;
            transform : rotateX(0deg) !important;
        }
        >.dra-arrow{
            width : 100%;
            height : 20px;
            text-align:center;
            background-color : white;
            transform : rotateX(180deg);
            i{
                display:inline-block;
                margin : 0 auto;
            }
        }
    }

    .dra.max {
        padding-bottom: 20px;
        .content{
            overflow : hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
    .actor{
        background-color : white;
        margin : 10px 0;
        padding : 10px;
        border-radius : 4px;
        .a-text{
            display: flex;
            margin: 10px 0;
            .textName{
                flex-basis: 20%;
            }
            .textContent{
                flex: 1;
            }
            >div{
            margin-bottom: 10px;
            span{
                color : #004358;
            }
        }
        }
        
    }
    .photo{
        background-color : white;
        margin : 10px 0 50px;
        padding : 10px;
        border-radius : 4px;
        div{
            margin : 5px 0;
            ul{
                // display : flex;
                // justify-content : space-between;
                li{
                    // flex-basis : 30%;
                    margin: 10px 0 ;
                    img{
                        width : 100%;
                        // height : 130px;
                    }
                }
            }
        }
        
    }
    .bottom{
        background-color : white;
        height: 50px;
        padding-top: 10px;
        position: fixed;
        bottom: -1px;
        width: 100%;
        z-index: 1000;
        div{
            background-color : #ff9900;
            height : 100%;
            color : white;
            line-height : 50px;
            text-align : center;
            border-radius : 4px;
        }
    }
}
</style>